<template>
    <div id="base-container">
        <div class="base-title">查询表格</div>
        <div class="base-search">
            <SearchIndex :model-prop="searchParam" :model-form="searchTopEleForm" @enter-search="fetchTableData"
                @enter-delete="fetchTableData" />
        </div>
        <div class="base-menu">
            <el-button type="primary" @click="beforeAdd">添加单位</el-button>
            <div :class="['hide-menu', tableSelectionData.length > 0 ? 'hide-active' : '']">
                <el-button type="danger" @click="hadnleDeleteMore">删除多选</el-button>
                <el-button type="primary" @click="clearSelection">清空多选</el-button>
            </div>
        </div>
        <div class="base-table">
            <el-table ref='tableRef' :data='tableData' border @selection-change="selectionChange">
                <el-table-column align="center" type='selection'></el-table-column>
                <el-table-column prop="id" align="center" min-width="200" label="ID"></el-table-column>
                <el-table-column prop="name" align="center" min-width="200" label="设备名称">
                    <template #default="{ row }">
                        <span class="link" @click="handleRouterPush(row)">
                            <el-tooltip content="点击跳转">
                                {{ row.name }}
                            </el-tooltip>
                        </span>
                    </template>
                </el-table-column>
                <el-table-column align="center" width="180" label="操作" fixed="right">
                    <template #default="{ row }">
                        <div class="menu-flex">
                            <span @click="handleDelete(row)">删除</span>
                            <span @click="beforeUpdate(row)">更新</span>
                            <span @click="beforeCopy(row)">复制</span>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
    <el-dialog v-model="dialogShow" :title="dialogTitle + '融为调节器'" width="500px">
        <DialogForm :ref="(e) => dialogForm = e" :model-form="DialogEleForm" :model-prop="dialogParam" />
        <template #footer>
            <el-button type="info" @click="dialogShow = false">取消</el-button>
            <el-button type="primary" @click="handleSubmit">确认</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import Api from "@/api/resourceManagement/34Institutions/SBandDualChannelOpticalReceiver/34SBandDualChannelOpticalReceivers"
import { pageMediator } from '@/api/resourceManagement/type';
import SearchIndex from '@/components/formEncapsulation/searchIndex.vue';
import { DialogEleForm, searchTopEleForm } from '../../resourceFormEle/integratedIntoADemodulator';
import { paramsSendAxios } from '@/utils/dataFormatSpecification';
import DialogForm from '@/components/formEncapsulation/dialogForm.vue';
import { useRouter } from 'vue-router';
import { secondConfirm, submitFormRules } from '@/utils/elementC';
import { TableInstance } from 'element-plus';
import { nextTick } from 'vue';
/**
 * @name 资源管理-34所S频段双通道光端接收机
 * ---------------
 */


/**
 * @description 获取业务数据
 */
const tableData = ref<pageMediator[]>([])
onMounted(() => {
    fetchTableData()
})
const searchParam = ref({
    name: { like: true, value: "" },
    id: { like: true, value: "" }
})
const fetchTableData = async () => {
    const { response } = await Api.get(paramsSendAxios('get', searchParam.value))
    tableData.value = response
}

/**
 * @description 页面跳转
 */
const router = useRouter()
const handleRouterPush = (row: pageMediator) => {
    router.push({
        name: "34SBandDualChannelOpticalReceiversManagement",
        query: {
            id: row.idx,
            name: row.name,
            code: row.id
        }
    })
}

/**
 * @description 表格操作-新增
 */
const dialogParam = ref({
    id: '',
    name: ''
})
const dialogShow = ref(false)
const dialogTitle = ref('新增')
/**
 * @description 表格操作-删除
 */
const handleDelete = async (row: pageMediator) => {
    if (await secondConfirm()) {
        dialogParam.value = row
        await Api.delete(paramsSendAxios('delete', dialogParam.value))
        fetchTableData()
    }
}

/**
 * @description 表格操作-新增
 */
const dialogForm = ref()
const beforeAdd = () => {
    nextTick(() => {
        dialogForm.value?.formRef.resetFields()
        dialogTitle.value = '新增'
        dialogShow.value = true
    })
}
/**
 * @description 表格操作-更新
 */
const oldRowData = ref<pageMediator>({ id: '', name: '', idx: "" })
const beforeUpdate = async (row: pageMediator) => {
    oldRowData.value = JSON.parse(JSON.stringify(row))
    dialogShow.value = true
    dialogParam.value = JSON.parse(JSON.stringify(row))
    dialogTitle.value = '更新'
}
/**
 * @description 表格操作-复制
 */
const beforeCopy = (row: pageMediator) => {
    oldRowData.value = JSON.parse(JSON.stringify(row))
    dialogShow.value = true
    dialogParam.value = JSON.parse(JSON.stringify(row))
    dialogTitle.value = '复制'
}

const handleSubmit = async () => {
    if (!await submitFormRules(dialogForm.value.formRef)) return
    if (dialogTitle.value == '新增') {
        const res = await Api.add(paramsSendAxios('add', dialogParam.value))
        dialogShow.value = res ? false : true
        fetchTableData()
    } else if (dialogTitle.value == '更新') {
        const res = await Api.update(paramsSendAxios('update', dialogParam.value, oldRowData.value))
        dialogShow.value = res ? false : true
        fetchTableData()
    } else if (dialogTitle.value == '复制') {
        let copyParam = { name: oldRowData.value.name }
        const res = await Api.copy(paramsSendAxios('copy', dialogParam.value, copyParam))
        dialogShow.value = res ? false : true
        fetchTableData()
    }
}

/**
 * @description 处理表格多选
 */
const tableRef = ref<TableInstance>()
const tableSelectionData = ref<pageMediator[]>([])
const selectionChange = (e: pageMediator[]) => {
    tableSelectionData.value = e
}

const hadnleDeleteMore = async () => {
    if (await secondConfirm()) {
        await Api.delete(paramsSendAxios('delete', tableSelectionData.value))
        fetchTableData()
    }
}

const clearSelection = () => {
    tableRef.value?.clearSelection()
}
</script>

<style scoped></style>